<template>
  <!--新增菜单弹框-->
  <el-dialog
    :close-on-click-modal="false"
    center
    :show-close="false"
    title="新增菜单"
    v-model="value"
    width="500px"
  >
    <el-form :model="formData" ref="formRef">
      <el-form-item label="菜单名称" prop="configName">
        <el-input
          v-model.trim="formData.configName"
          clearable
          placeholder="请输入菜单名称"
        >
        </el-input>
      </el-form-item>

      <el-form-item label="关联笔记" prop="noteIdList">
        <el-select
          filterable
          style="width: 100%"
          v-model="formData.noteIdList"
          placeholder="请选择笔记"
          multiple
        >
          <el-option
            v-for="(item, index) in noteList"
            :key="index"
            :label="item.title"
            :value="item.noteId"
            >{{ item.title }}</el-option
          >
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleCancel">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSave"> 确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
  
  <script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  getCurrentInstance,
  toRaw,
  nextTick,
  watchEffect
} from "vue";
import { getNoteList, addNote, deleteNote, writeNote } from "@/api/home";
import { login } from "@/api/user";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import { addMenu } from "@/api/menu";

export default defineComponent({
  props: {
    // 双向绑定
    value: {
      type: Boolean,
      default: () => false,
    },
    // 双向绑定
    noteList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      menuFlag: false,
      loading: false,
      formData: {
        configName: "",
        noteIdList: [],
      },
    });

    watchEffect(() => {
      state.menuFlag = props.value;
    });

    const { proxy } = getCurrentInstance() as any;

    const handleCancel = () => {
      state.menuFlag = false;
      emit("update:value", state.menuFlag);
    };

    const handleSave = async () => {
      state.loading = true;
      let res = await addMenu(toRaw(state.formData));
      state.loading = false;
      if (res.status == 0) {
        ElMessage.success("保存成功！");
        emit("complete", {});
        handleCancel();
      } else {
        ElMessage.error(res.message);
      }
      state.menuFlag = true;
    };

    const reset = async () => {
      await nextTick();
      proxy.$refs.formRef.resetFields();
      proxy.$refs.formRef.clearValidate();
    };

    return {
      ...toRefs(state),
      handleSave,
      handleCancel,
      reset,
    };
  },
});
</script>
  
  <style lang="less" scoped>
</style>
  